<template>
	<view class="login-login-contain">
		<view class="login-logo">
			<image class="login-img" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/loginlogo.png" mode=""></image>
			<text class="login-logo-text">{{programName}}平台</text>
		</view>
		<view class="login-opt">
			<button open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" class="login-opt-btn" type="default">微信授权</button>
			<!-- <text @click="toTelLogin" class="login-opt-text">手机号登录/注册</text> -->
		</view>
		
		<view class="login-pro-con">
			<text class="login-pro-text">登录代表您已同意</text>
			<text class="login-pro-pro">{{programName}}平台会员服务协议</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		programName
	} from '@/common/config'
	import {loginUrl , phoneUrl} from '@/utils/index.js'
	export default {
		data() {
			return {
				isShowAuth: true,
				sessionKey: '',
				isAuth: false,
				encrypdata: '',
				ivdata: '',
				openid: null,
				programName: programName
			}
		},
		onLoad() {
			this.getWxCode();
		},
		computed: {
			...mapState('userStore', ['hasLogin', 'userInfo']),
		},
		methods: {
			...mapMutations('userStore', ['saveUserInfo','SetIsSubscribe']),
			toTelLogin() {
				uni.redirectTo({
					url: '/pagesA/tel-login/tel-login'
				});
			},
			//获取微信code
			getWxCode() {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.wxLogin(loginRes.code)
					}
				});
			},
			//将code传给后台
			wxLogin(code) {
				let that = this;
				this.$request.get({
					url: loginUrl,
					data: {
						code: code
					},
				}).then(res => {
					this.sessionKey = res.sessionKey;
					const openid = res.openid;
					this.openid = openid;
				})
			},
			//获取用户手机号
			decryptPhoneNumber(e) { //点击获取手机号码按钮  
				this.encrypdata = e.detail.encryptedData;
				this.ivdata = e.detail.iv;
				this.$request.get({
					url: phoneUrl,
					data: {
						encrypdata: this.encrypdata,
						ivdata: this.ivdata,
						sessionkey: this.sessionKey
					},
				}).then(res => {
					let phoneNumber = res;
					this.autoLogin(phoneNumber);
				})
			},
			//自动登录注册
			autoLogin(phoneNumber) {
				this.$request.post({
					url: 'user/miniAutoLogin',
					data: {
						phoneNumber,
						kcOpenId: this.openid
					},
				}).then(res => {
					this.saveUserInfo(res.userInfo);
					uni.setStorageSync("openid", this.openid);
					this.SetIsSubscribe(true)
					//静默登录
					getApp().connectWS();
					uni.navigateBack({});
				})
			}
		}
	}
</script>

<style scoped>
	.login-login-contain .login-logo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 186upx;
	}

	.login-login-contain .login-img {
		width: 120upx;
		height: 120upx;
	}

	.login-login-contain .login-logo-text {
		font-size: 36upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(34, 34, 34, 1);
		margin-top: 6upx;
	}

	.login-login-contain .login-opt {
		margin-top: 206upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.login-login-contain .login-opt-btn {
		width: 670upx;
		height: 88upx;
		background-color: #2A7DFA;
		color: white;
		border-radius: 8upx;
		font-size: 36upx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.login-login-contain .login-opt-text {
		font-size: 32upx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #3467C4;
		margin-top: 33upx;
	}

	.login-login-contain .login-pro-text {
		color: #9B9B9B;
		font-size: 28upx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
	}

	.login-login-contain .login-pro-pro {
		font-size: 28upx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #3467C4;
	}

	.login-login-contain .login-pro-con {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 56upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
